<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天山商城首页</title>

    <!--获取屏幕宽度，根据屏幕宽度进行自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--引入bootStrap-->
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"/>

    <!--bootstrap 依赖jQuery-->
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="js/http.js"></script>
</head>
<body>
<script src="js/header.js">
</script>
<div class="container">
    <div class="row">
        <div class="jumbotron">
            <h1>欢迎来到天山商城</h1>
            <p>多 快 好 省！</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">开始购物吧</a></p>
        </div>
    </div>
    <div class="row" id="div_goods_list">

    </div>
</div>

<template id="template_goods_info">
    <div class="col-xs-2">
        <div class="thumbnail">
            <img src="{{imgUrl}}" alt="...">
            <div class="caption">

                <h3>{{remark}}</h3>
                <p>{{price}}</p>
                <p><a href="#" class="btn btn-primary" role="button" onclick="a({{id}})">商品详情</a>
                    <a href="#" class="btn btn-default" role="button">Button</a>
                </p>
            </div>
        </div>
    </div>
</template>
</body>
</html>

<script>
    $(function () {
        init();
    });

    function init() {
        //显示商品列表
        refreshGoodsList();
        //显示用户信息
        showUserInfo();
    }

    function showUserInfo() {
        //从浏览器缓存中获取用户信息
        let userJson = localStorage.getItem("userInfo");
        //显示
    }

    function a(id) {
        let url = 'detail.html?id='+id;
        url = encodeURI(url);
        location.href=url;

    }

    function refreshGoodsList() {
        //发起ajax http请求获取到商品列表数据
        httpGet("/goodsList", showGoodsList);



        // $.ajax({
        //     type: "get",
        //     url: "http://localhost:8081/shop-api/goodsList",
        //     success: function (resp) {
        //         console.log(resp);
        //         //json 装换为js对象
        //         let result = JSON.parse(resp);
        //         console.log("result");
        //         console.log(result);
        //         //业务状态码判断
        //         if (result.status == 0) {
        //             //业务处理成功
        //             let goodsList = result.data;
        //             //具体业务处理
        //             console.log(result);
        //             showGoodsList(goodsList);
        //         } else {
        //             //业务处理失败
        //             alert(result.msg);
        //         }
        //     }
        // });

        //遍历渲染商品列表到页面
        function showGoodsList(goodsList) {
            //业务内容清空
            $("#div_goods_list").html("");

            let goodsListHtml = "";
            //获取模板标签
            let goodsTemplate = $("#template_goods_info").html();

            if(!goodsList){
                return;
            }

                goodsList.forEach(goods => {
                    //替换模板标签内容
                    let goodsHtml = goodsTemplate
                        .replaceAll("{{imgUrl}}", goods.imgUrl)
                        .replaceAll("{{remark}}", goods.remark)
                        .replaceAll("{{id}}", goods.id)
                        .replaceAll("{{price}}", goods.price)
                    //拼接HTML
                    goodsListHtml += goodsHtml;
                })

                //填充html到指定位置
                $("#div_goods_list").html(goodsListHtml);

                console.log("789");
            }
    }

</script>